<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>后台登录</title>
  <style>
    @import url('https://rsms.me/inter/inter-ui.css');

    ::selection {
      background: #2D2F36;
    }

    ::-webkit-selection {
      background: #2D2F36;
    }

    ::-moz-selection {
      background: #2D2F36;
    }

    body {
      background: white;
      font-family: 'Inter UI', sans-serif;
      margin: 0;
      padding: 20px;
    }

    .page {
      background: #e2e2e5;
      display: flex;
      flex-direction: column;
      height: calc(100% - 40px);
      position: absolute;
      place-content: center;
      width: calc(100% - 40px);
    }

    @media (max-width: 767px) {
      .page {
        height: auto;
        margin-bottom: 20px;
        padding-bottom: 20px;
      }
    }

    .container {
      display: flex;
      height: 320px;
      margin: 0 auto;
      width: 640px;
    }

    @media (max-width: 767px) {
      .container {
        flex-direction: column;
        height: 630px;
        width: 320px;
      }
    }

    .left {
      background: white;
      height: calc(100% - 40px);
      top: 20px;
      position: relative;
      width: 50%;
    }

    @media (max-width: 767px) {
      .left {
        height: 100%;
        left: 20px;
        width: calc(100% - 40px);
        max-height: 270px;
      }
    }

    .login {
      font-size: 50px;
      font-weight: 200;
      margin: 50px 40px 40px;
      text-align: right;
    }

    .eula {
      color: #999;
      font-size: 14px;
      line-height: 1.5;
      margin: 40px;
    }

    .right {
      background: #474A59;
      box-shadow: 0px 0px 40px 16px rgba(0, 0, 0, 0.22);
      color: #F1F1F2;
      position: relative;
      width: 50%;
      z-index: 999;
    }

    @media (max-width: 767px) {
      .right {
        flex-shrink: 0;
        height: 100%;
        width: 100%;
        max-height: 350px;
      }
    }

    svg {
      position: absolute;
      width: 320px;
    }

    path {
      fill: none;
      stroke: url(#linearGradient);
      ;
      stroke-width: 4;
      stroke-dasharray: 240 1386;
    }

    .form {
      margin: 40px;
      position: absolute;
    }

    label {
      color: #c2c2c5;
      display: block;
      font-size: 14px;
      height: 16px;
      margin-top: 20px;
      margin-bottom: 5px;
    }

    input {
      background: transparent;
      border: 0;
      color: #f2f2f2;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      outline: none !important;
      width: 100%;
    }

    input::-moz-focus-inner {
      border: 0;
    }

    #submit {
      color: #707075;
      margin-top: 40px;
      transition: color 300ms;
      cursor: pointer;
    }

    #submit:focus {
      color: #f2f2f2;
    }

    #submit:active {
      color: #d0d0d2;
    }


    .fireworks {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <!-- <div class="login">
        <div class="message">后台登录</div>
        <div id="darkbannerwrap"></div>

        <form method="post">
            <input name="action" value="login" type="hidden">
            <input name="username" placeholder="用户名" required="" type="text">
            <hr class="hr15">
            <input name="password" placeholder="密码" required="" type="password">
            <hr class="hr15">
            <input value="登录" style="width:100%;" type="submit">
            <hr class="hr20">
            <div id="show" align="center"></div>
        </form>
    </div>
  <script>
      var failure = <%= flag %>;
      if(failure == 1) document.getElementById("show").innerText = "登陆失败！<%= info %>"  ;
  </script> -->

  <div class="page">
    <div class="container">
      <div class="left" style="background: #fff url(img/logo2.jpg) no-repeat center;background-size: 100%;">
        <div class="login">Login</div>
        <!-- <div class="eula">By logging in you agree to the ridiculously long terms that you didn't bother to read</div>  -->
      </div>
      <div class="right">
        <svg viewBox="0 0 320 300">
          <defs>
            <linearGradient inkscape:collect="always" id="linearGradient" x1="13" y1="193.49992" x2="307" y2="193.49992"
              gradientUnits="userSpaceOnUse">
              <stop style="stop-color:#ff00ff;" offset="0" id="stop876" />
              <stop style="stop-color:#ff0000;" offset="1" id="stop878" />
            </linearGradient>
          </defs>
          <path
            d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
        </svg>
        <div class="form">
          <label for="email">Username</label>
          <input type="email" id="email">
          <label for="password">Password</label>
          <input type="password" id="password">
          <input type="submit" id="submit" value="Login In">
        </div>
      </div>
    </div>
  </div>
  <canvas class="fireworks"></canvas>
</body>
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.js"></script>
<script src="javascripts/jquery-3.3.1.min.js"></script>
<script>
  var current = null;
  document.querySelector('#email').addEventListener('focus', function (e) {
    if (current) current.pause();
    current = anime({
      targets: 'path',
      strokeDashoffset: {
        value: 0,
        duration: 700,
        easing: 'easeOutQuart'
      },
      strokeDasharray: {
        value: '240 1386',
        duration: 700,
        easing: 'easeOutQuart'
      }
    });
  });
  document.querySelector('#password').addEventListener('focus', function (e) {
    if (current) current.pause();
    current = anime({
      targets: 'path',
      strokeDashoffset: {
        value: -336,
        duration: 700,
        easing: 'easeOutQuart'
      },
      strokeDasharray: {
        value: '240 1386',
        duration: 700,
        easing: 'easeOutQuart'
      }
    });
  });
  document.querySelector('#submit').addEventListener('click', function (e) {
    if (current) current.pause();
    current = anime({
      targets: 'path',
      strokeDashoffset: {
        value: -730,
        duration: 700,
        easing: 'easeOutQuart'
      },
      strokeDasharray: {
        value: '530 1386',
        duration: 700,
        easing: 'easeOutQuart'
      },
      complete: function (anim) {
          var username = $('#email').val();
          var password = $('#password').val();
          console.log(username,password)
          $.post('/',{username: username,password: password})
          //   url: '/'
          //   ,data: {
          //     username: username,
          //     password: password
          //   }
          // })
      }
    });
  });
  // document.querySelector('#submit').addEventListener('click', function () {
  //   var bouncingBall = anime({
  //     targets: '#submit',
  //     translateX: [{
  //       value: 15
  //     }, {
  //       value: -15
  //     }],
  //     duration: 200,
  //     // loop: true,
  //     direction: 'alternate',
  //     easing: 'easeInCubic'
  //   });
  // })

  var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  var ff = navigator.userAgent.indexOf('Firefox') > 0;
  var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';
  if (iOS) document.body.classList.add('iOS');

  var fireworks = (function () {

    var getFontSize = function () {
      return parseFloat(getComputedStyle(document.documentElement).fontSize);
    }

    var canvas = document.querySelector('.fireworks');
    var ctx = canvas.getContext('2d');
    var numberOfParticules = 24;
    var distance = 200;
    var x = 0;
    var y = 0;
    var animations = [];

    var setCanvasSize = function () {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }

    var updateCoords = function (e) {
      x = e.clientX || e.touches[0].clientX;
      y = e.clientY || e.touches[0].clientY;
    }

    var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];

    var createCircle = function (x, y) {
      var p = {};
      p.x = x;
      p.y = y;
      p.color = colors[anime.random(0, colors.length - 1)];
      p.color = '#FFF';
      p.radius = 0;
      p.alpha = 1;
      p.lineWidth = 6;
      p.draw = function () {
        ctx.globalAlpha = p.alpha;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
        ctx.lineWidth = p.lineWidth;
        ctx.strokeStyle = p.color;
        ctx.stroke();
        ctx.globalAlpha = 1;
      }
      return p;
    }

    var createParticule = function (x, y) {
      var p = {};
      p.x = x;
      p.y = y;
      p.color = colors[anime.random(0, colors.length - 1)];
      p.radius = anime.random(getFontSize(), getFontSize() * 2);
      p.draw = function () {
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
        ctx.fillStyle = p.color;
        ctx.fill();
      }
      return p;
    }

    var createParticles = function (x, y) {
      var particules = [];
      for (var i = 0; i < numberOfParticules; i++) {
        var p = createParticule(x, y);
        particules.push(p);
      }
      return particules;
    }

    var removeAnimation = function (animation) {
      var index = animations.indexOf(animation);
      if (index > -1) animations.splice(index, 1);
    }

    var animateParticules = function (x, y) {
      setCanvasSize();
      var particules = createParticles(x, y);
      var circle = createCircle(x, y);
      var particulesAnimation = anime({
        targets: particules,
        x: function (p) {
          return p.x + anime.random(-distance, distance);
        },
        y: function (p) {
          return p.y + anime.random(-distance, distance);
        },
        radius: 0,
        duration: function () {
          return anime.random(1200, 1800);
        },
        easing: 'easeOutExpo',
        complete: removeAnimation
      });
      var circleAnimation = anime({
        targets: circle,
        radius: function () {
          return anime.random(getFontSize() * 8.75, getFontSize() * 11.25);
        },
        lineWidth: 0,
        alpha: {
          value: 0,
          easing: 'linear',
          duration: function () {
            return anime.random(400, 600);
          }
        },
        duration: function () {
          return anime.random(1200, 1800);
        },
        easing: 'easeOutExpo',
        complete: removeAnimation
      });
      animations.push(particulesAnimation);
      animations.push(circleAnimation);
    }

    var mainLoop = anime({
      duration: Infinity,
      update: function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        animations.forEach(function (anim) {
          anim.animatables.forEach(function (animatable) {
            animatable.target.draw();
          });
        });
      }
    });

    document.addEventListener(tap, function (e) {
      updateCoords(e);
      animateParticules(x, y);
      // ga('send', 'event', 'Fireworks', 'Click');
    }, false);

    window.addEventListener('resize', setCanvasSize, false);

    return {
      boom: animateParticules
    }

  })();
</script>

</html>